<template>
  <div class="score-img">
    <div class="left">
      <div class="top">
        <span class="iconfont" :class="icon"></span>
        <span class="title">{{title}}</span>
      </div>
      <div class="bottom">
        <img @click="showImagePreview" v-if="imgs" class="img" :src="preImgList[0]" alt="" id="src">
        <div class="txt" v-else>
          <span>{{txt}}</span>
        </div>
      </div>
    </div>
    <div class="right">
      <span class="ts">总分 {{max}} 分</span>
      <div class="score">
        <span class="txt">评分</span>
        <input  @blur.prevent="autoScroll" :class="{'red':point&&point<max}" ref="inp" v-model="point" type="number" class="inp">
        <span class="unit">分</span>
      </div>
      <div class="res">
        <span class="txt">理由</span>
        <input :disabled="true" @blur.prevent="autoScroll" v-model="remark" type="text" class="inp">
      </div>
    </div>
  </div>
</template>

<script>
import { QI_NIU_URL } from '../../app.config'

export default {
  props: {
    icon: String,
    title: String,
    imgs: String,
    txt: String,
    max: {
      type: Number,
      default: 10
    },
    value: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  methods: {
    autoScroll () {
      const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
      window.scrollTo(0, Math.max(scrollHeight - 1, 0))
    },
    imgUrl (img) {
      // 自动旋转
      return QI_NIU_URL + img + '?imageMogr2/auto-orient'
    },
    showImagePreview (initialIndex) {
      this.$createImagePreview({
        imgs: this.preImgList,
        initialIndex: 0
      }).show()
    }
  },
  created () {
    // 初始化
    if (!this.value.point) {
      this.$emit('input', { point: null, remark: null, required: true })
    }
  },
  computed: {
    remark: {
      get () {
        return this.value.remark
      },
      set (newVal) {
        this.value.remark = newVal
        this.$emit('input', this.value)
      }
    },
    point: {
      get () {
        return this.value.point
      },
      set (newVal) {
        if (newVal > this.max) {
          newVal = this.max
          this.$refs.inp.value = this.max
        }
        this.value.point = newVal
        this.$emit('input', this.value)
      }
    },
    imgList () {
      if (!this.imgs) {
        return []
      }
      return this.imgs.split(',').filter(value => value !== '')
    },
    preImgList () {
      return this.imgList.map(img => {
        return this.imgUrl(img)
      })
    }
  }
}
</script>

<style scoped lang="stylus">
  .score-img
    height: 129px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 3px 7px 0px rgba(89, 88, 87, 0.52);
    border-radius: 10px;
    display flex
    .left
      width 115px
      flex 0 0 115px
      border-right 1Px solid #ECEAEA
      display flex
      flex-direction column
      .top
        height 45px
        display flex
        align-items center
        justify-content center
        .iconfont
          color #F9A528
          dpr-font(18px)
        .title
          dpr-font(14px)
          color: rgba(85, 84, 93, 1);
          margin-left 10px
      .bottom
        flex 1
        display flex
        margin-top 5px
        align-items flex-start
        justify-content center
        .txt
          display flex
          align-items center
          justify-content center
          height 55px
          width 55px
          border-radius 10px
          background-color #F5F4F7
          color #55545D
          dpr-font(14px)
        .img
          height 55px
          width 55px
          border-radius 10px
        .iconfont
          color #F9A528
          dpr-font(9px)
        .ltxt
          dpr-font(8px);
          color:rgba(185,183,192,1);
    .right
      flex 1
      position relative
      display flex
      align-items flex-start
      justify-content center
      flex-direction column
      padding-left 10px
      .ts
        dpr-font(11px)
        color:rgba(185,183,192,1);
        position absolute
        top 11px
        right 11px
      .score
        height 27px
        display flex
        align-items center
        .red
          color red
        .inp
          text-align center
          margin 0 9px
          width 93px
          height 27px
          border none
          outline none
          background-color #F5F4F7
          dpr-font(11px)
        .txt
          dpr-font(11px)
          color:rgba(85,84,93,1);
        .unit
          font-size:11px;
          color:rgba(185,183,192,1);
      .res
        height 27px
        display flex
        align-items center
        margin-top 9px
        width 90%
        .txt
          dpr-font(11px)
          color:rgba(85,84,93,1);
          width auto
        .inp
          padding-left 10px
          flex 1
          outline none
          border none
          background-color #F5F4F7
          dpr-font(11px)
          margin-left 9px
          height 27px
</style>
